<template>
  <div class="calendar">
    <div class="calendar-header">
      <span class="nav-arrow" @click="prevYear"><<</span>
      <span class="nav-arrow" @click="prevMonth"><</span>
      <span class="month-year">{{ currentYear }}年 {{ currentMonth }}月</span>
      <span class="nav-arrow" @click="nextMonth">></span>
      <span class="nav-arrow" @click="nextYear">>></span>
    </div>

    <div class="calendar-grid">
      <div class="calendar-weekdays">
        <div v-for="day in weekdays" :key="day" class="weekday">{{ day }}</div>
      </div>
      <div class="calendar-days">
        <div
            v-for="day in days"
            :key="day.fullDate"
            :class="[
            'day',
            {
              today: day.isToday,
              'not-current-month': !day.isCurrentMonth,
              'has-event': hasEvent(day.fullDate),
              selected: day.fullDate === selectedDate
            }
          ]"
            @click="selectDate(day)"
        >
          {{ day.date }}
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'

interface Day {
  date: number
  isToday: boolean
  isCurrentMonth: boolean
  fullDate: string
}

const props = defineProps({
  tasks: {
    type: Object as () => Record<string, Array<{time: string, content: string}>>,
    default: () => ({})
  }
})

const emit = defineEmits(['select-date'])

const currentDate = ref(new Date())
const weekdays = ['日', '一', '二', '三', '四', '五', '六']
const selectedDate = ref<string | null>(null)

const currentMonth = computed(() => currentDate.value.getMonth() + 1)
const currentYear = computed(() => currentDate.value.getFullYear())

const days = computed(() => {
  const year = currentDate.value.getFullYear()
  const month = currentDate.value.getMonth()
  const firstDayOfMonth = new Date(year, month, 1)
  const lastDayOfMonth = new Date(year, month + 1, 0)
  const daysInMonth = lastDayOfMonth.getDate()
  const startDay = firstDayOfMonth.getDay()

  const days: Day[] = []

  const prevMonthLastDay = new Date(year, month, 0).getDate()
  for (let i = startDay - 1; i >= 0; i--) {
    const date = new Date(year, month - 1, prevMonthLastDay - i)
    days.push({
      date: prevMonthLastDay - i,
      isToday: false,
      isCurrentMonth: false,
      fullDate: date.toISOString().split('T')[0]
    })
  }

  for (let i = 1; i <= daysInMonth; i++) {
    const date = new Date(year, month, i)
    const isToday = date.toDateString() === new Date().toDateString()
    days.push({
      date: i,
      isToday,
      isCurrentMonth: true,
      fullDate: date.toISOString().split('T')[0]
    })
  }

  const nextMonthDays = 42 - days.length
  for (let i = 1; i <= nextMonthDays; i++) {
    const date = new Date(year, month + 1, i)
    days.push({
      date: i,
      isToday: false,
      isCurrentMonth: false,
      fullDate: date.toISOString().split('T')[0]
    })
  }

  return days
})

const prevMonth = () => {
  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, 1)
  selectedDate.value = null
}

const nextMonth = () => {
  currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 1)
  selectedDate.value = null
}

const prevYear = () => {
  currentDate.value = new Date(currentDate.value.getFullYear() - 1, currentDate.value.getMonth(), 1)
  selectedDate.value = null
}

const nextYear = () => {
  currentDate.value = new Date(currentDate.value.getFullYear() + 1, currentDate.value.getMonth(), 1)
  selectedDate.value = null
}

const selectDate = (day: Day) => {
  if (day.isCurrentMonth) {
    selectedDate.value = day.fullDate
    emit('select-date', day.fullDate)
  }
}

const hasEvent = (date: string) => {
  return props.tasks[date] && props.tasks[date].length > 0
}
</script>

<style scoped>
.calendar {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  width: 400px;
  height: 355px;
  margin: 0 auto;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 10px;
}

.month-year {
  font-size: 1.2em;
  font-weight: bold;
  color: #333;
}

.nav-arrow {
  font-size: 1.5em;
  cursor: pointer;
  color: #007bff;
  transition: color 0.3s ease;
}

.nav-arrow:hover {
  color: #0056b3;
}

.calendar-grid {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2px;
}

.calendar-weekdays, .calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays div {
  padding: 1px;
  text-align: center;
  color: #343a40;
  font-weight: bold;
}

.calendar-days div {
  padding: 11px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.calendar-days div.not-current-month {
  color: #ccc;
}

.calendar-days div.today {
  background-color: #e0e0e0;
  border-radius: 80%;
  color: #333;
}

.calendar-days div.has-event {
  background-color: #ffeb3b;
  border-radius: 80%;
  color: #333;
}

.calendar-days div.selected {
  background-color: #007bff;
  border-radius: 80%;
  color: white;
}
</style>